
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 动画</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-动画FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="动画 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link current">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>动画</h1>
    
    <h2 id="创建动画"><a href="#创建动画" class="headerlink" title="创建动画"></a>创建动画</h2><p>编辑器支持创建、编辑和使用序列帧动画。创建序列帧动画的方式有：</p>
<ol>
<li><p>使用Adobe Animate CC/Flash等动画编辑工具制作好动画，导出带plist或eas扩展名的描述文件以及相关的贴图（应放置在相同目录），然后将描述文件（仅描述文件，不是贴图）拖入编辑器即可生成动画素材。</p>
</li>
<li><p>点击菜单“资源”-&gt;”新建动画”，或者点击主工具栏<img src="../../images/maintb_09.png" alt>按钮，可以创建一个新的空白动画。然后在动画编辑界面点击“导入图片序列”，导入多张图片。</p>
</li>
<li><p>直接拖入一个GIF文件到编辑器，GIF会自动转换为序列帧动画。</p>
</li>
<li><p>Flash项目支持直接导入和使用SWF文件。</p>
</li>
</ol>
<p>无论从何种方式创建的动画，在编辑器里，动画素材都是以一个单一文件存在（扩展名为jta）。也就是说，无论动画是从库里的图片文件创建的，还是从外面导进来的，都不会再有对单个图片的依赖。例如，如果你是从资源库里拖图片进入动画编辑器创建动画的，创建完成后，这些图片与动画再没有任何关系。如果你要设置动画所在的纹理集，在动画编辑器里对动画进行设置，对那些图片设置是无效的。</p>
<h2 id="编辑动画"><a href="#编辑动画" class="headerlink" title="编辑动画"></a>编辑动画</h2><p>在资源库中，或者舞台上，双击动画，进入动画属性设置对话框：</p>
<p><img src="../../images/QQ20191211-163721.png" alt></p>
<ul>
<li><p><code>帧频</code> 可选24、30和60。可根据源动画的设定进行修改。</p>
</li>
<li><p><code>播放间隔</code> 每隔多少帧播放一张图片。增大或减少这个值可以降低或者增加动画播放的速度。</p>
</li>
<li><p><code>循环延迟</code> 当动画播放结束后，停留多少帧再重新开始播放。</p>
</li>
<li><p><code>本帧延迟</code> 播放当前帧后停留多少帧再继续播放。</p>
</li>
<li><p><code>摆动式播放</code> 默认的播放形式是从第一帧播放到最后一帧，然后下个循环又从第一帧播放到最后一帧。如果勾选了摆动式播放，则先从第一帧播放到最后一帧，再从最后一帧倒序播放回第一帧，依此循环。</p>
</li>
<li><p><code>纹理集</code> 设置动画发布到指定的纹理集。<strong>动画不支持纹理分页，也就是说，当纹理设置了自动分页时，如果动画被分布到不同的纹理集页面，运行时就会出现显示错误。这时你可以安排动画放置到单独的纹理集，或者和其他动画放在同一个纹理集上。</strong></p>
</li>
<li><p><code>允许平滑</code> 它指示动画在拉伸时是否进行平滑处理。如果这个动画是用在制作像素游戏里的角色，你可能需要关闭平滑，其他情况一般都应开启。这个选项不适用于Unity等使用纹理集的平台。</p>
</li>
</ul>
<p>功能按钮：</p>
<ul>
<li><p><code>导入图片序列</code> 从序列图片中更新动画。</p>
</li>
<li><p><code>导入Sprite表</code> 导入Adobe Animate CC或者其他动画工具导出的动画文件。</p>
</li>
<li><p><code>导出图片序列</code> 将动画导出为图片序列。</p>
</li>
</ul>
<h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性"></a>实例属性</h2><p>在舞台上选中一个动画，右边的属性面板列表出现：</p>
<p><img src="../../images/QQ20191211-163804.png" alt></p>
<ul>
<li><p><code>帧</code> 设置当前帧。</p>
</li>
<li><p><code>播放</code> 设置动画是否处于播放状态。</p>
</li>
<li><p><code>颜色</code> 修改动画各个颜色通道的值，使动画产生变色的效果。</p>
</li>
<li><p><code>亮度</code> 调整动画的明暗。这个实际是通过修改<code>颜色</code>属性实现的，和设置颜色为灰阶颜色一样的效果。</p>
</li>
</ul>
<h2 id="GMovieClip"><a href="#GMovieClip" class="headerlink" title="GMovieClip"></a>GMovieClip</h2><p>动画我们一般不直接使用new来创建，也很少有需要单独创建动画的需求。它一般直接放置在其他组件中作为组成元素。如果确实需要实例化一个动画，可以使用以下方法：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GMovieClip aMovie = UIPackage.CreateObject(<span class="string">"包名"</span>,<span class="string">"动画名"</span>).asMovieClip;</span><br></pre></td></tr></table></figure>
<p>常用的API有：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aMovie.playing = <span class="literal">false</span>; <span class="comment">//切换播放和停止状态</span></span><br><span class="line">aMovie.frame = <span class="number">5</span>; <span class="comment">//如果动画处于停止状态，可以设置停止在第几帧</span></span><br></pre></td></tr></table></figure>
<p>对动画进行循环播放的设置，例如从第几帧播放到第几帧，循环播放多少次等：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aMovie.SetPlaySettings(<span class="number">0</span>, <span class="number">-1</span>, <span class="number">0</span>, <span class="number">-1</span>);</span><br></pre></td></tr></table></figure>
<p>对动画播放过程的其他控制，可以使用MovieClip对象：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//返回播放头部</span></span><br><span class="line">((MovieClip)aMovie.displayObject).Rewind();</span><br></pre></td></tr></table></figure>
<p>动画播放完成可以获得一个回调通知：（如果是循环播放，则所有循环结束后才算播放完成）</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry</span></span><br><span class="line">aMovie.onPlayEnd.Add(...);</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3</span></span><br><span class="line">aMovie.setPlaySettings(..., callback);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Egret</span></span><br><span class="line">aMovie.setPlaySettings(..., callback, <span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya</span></span><br><span class="line">aMovie.setPlaySettings(..., Handler.create(callback, <span class="keyword">this</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx</span></span><br><span class="line">aMovie-&gt;setPlaySettings(..., CC_CALLBACK_0(AClass::onPlayComplete, this));</span><br></pre></td></tr></table></figure>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/movieclip.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
